<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>雲</title>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="css/hui.css"/>
    <link rel="stylesheet" href="css/mui.min.css"> -->
    <link rel="stylesheet" href="css/base.css">
    <!-- <link rel="stylesheet" href="fonts/iconfont.css"> -->
    <link rel="stylesheet" href="css/homepage.css">
    <style>
       
    </style>
</head>
<body>
    <div class="banner">
        <ul class="clearfix">
            <li>
                <a href="#"><img src="images/l8.jpg" alt=""/></a>
            </li>
            <li>
                <a href="#"><img src="images/l1.jpg" alt=""/></a>
            </li>
            <li>
                <a href="#"><img src="images/l2.jpg" alt=""/></a>
            </li>
            <li>
                <a href="#"><img src="images/l3.jpg" alt=""/></a>
            </li>
            <li>
                <a href="#"><img src="images/l4.jpg" alt=""/></a>
            </li>
            <li>
                <a href="#"><img src="images/l5.jpg" alt=""/></a>
            </li>
            <li>
                <a href="#"><img src="images/l6.jpg" alt=""/></a>
            </li>
            <li>
                <a href="#"><img src="images/l7.jpg" alt=""/></a>
            </li>
            <li>
                <a href="#"><img src="images/l8.jpg" alt=""/></a>
            </li>
            <li>
                <a href="#"><img src="images/l1.jpg" alt=""/></a>
            </li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</body>
</html>
<script>
    window.onload=function () {
    banner();
};
//定义一个对象 承载我们封装的事件
window.yy = {};
yy.transitionEnd = function(dom, callback) {
	/* 需要绑定事件的dom  绑定之后  当触发了 事件的时候  执行 callback */
	if(dom && typeof dom == 'object') {
		dom.addEventListener('webkitTransitionEnd', function() {
			/*if(callback){
			 callback();
			 }*/
			callback && callback();
		});

		dom.addEventListener('transitionEnd', function() {
			callback && callback();
		});
	}
};
    function banner() {
    var banner = document.querySelector('.banner');
    var width = banner.offsetWidth;
    var imageBox = banner.querySelector('ul:first-child');
    // console.log(imageBox);
    var pointBox = banner.querySelector('ul:last-child');
    var points = pointBox.querySelectorAll('li');
    // 1.自动轮播
    var index = 1;//当前图片索引
    points[index-1].className = 'now';
    var timer = setInterval(function () {
        index++;
        //imageBox家过渡
        addTransition();
        translateX(-index * width);
    }, 3000);
    //无缝滚动
    yy.transitionEnd(imageBox, function () {
        if (index >= 9) {
            index = 1;
            removeTransition();
            translateX(-index * width);
        } else if (index <= 0) {
            index = 8;
            removeTransition();
            translateX(-index * width);
        }
        setPoint();
    })
// 2点对应图片
    var setPoint = function () {
        window.yy = {};
yy.transitionEnd = function(dom, callback) {
	/* 需要绑定事件的dom  绑定之后  当触发了 事件的时候  执行 callback */
	if(dom && typeof dom == 'object') {
		dom.addEventListener('webkitTransitionEnd', function() {
			/*if(callback){
			 callback();
			 }*/
			callback && callback();
		});

		dom.addEventListener('transitionEnd', function() {
			callback && callback();
		});
	}
};

        for (var i = 0; i < points.length; i++) {
            points[i].className = "";
        }
        //判断索引 动画结束后设置点
        points[index - 1].className = 'now';

    }

//3图片滑动
    var startX = 0;//开始坐标
    var moveX = 0;//移动时x的坐标
    var distancex = 0;//移动距离
    var isMove = false;//是否滑动过
    imageBox.addEventListener('touchstart', function (e) {
         e.stopPropagation();
        clearInterval(timer);
        startX = e.touches[0].clientX;
    });
    imageBox.addEventListener('touchmove', function (e) {
        e.stopPropagation();
        isMove = true;
        moveX = e.touches[0].clientX;
        // console.log(moveX);
        distancex = moveX - startX;
        //console.log(distancex);
        removeTransition();
        translateX(-index * width + distancex);

    });
    //谷歌浏览器toucuend可能会丢失事件 换为window
    window.addEventListener('touchend', function (e) {
//      e.preventDefault();
        e.stopPropagation();
        if (Math.abs(distancex) > (width / 3) && isMove) {
            if (distancex > 0) {
                index--;
            } else {
                index++;
            }
            addTransition();
            translateX(-index * width);
        } else {
            addTransition();
            translateX(-index * width);
        }
        isMove = false;
        startX = 0;
        moveX = 0;
        distancex = 0;
        //加定时器
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            //imageBox家过渡
            addTransition();
            translateX(-index * width);

        }, 3000);
    })

    /*公用方法*/
//添加过渡
    var addTransition = function () {
        imageBox.style.webkitTransition = 'all .2s ';
        imageBox.style.transition = "all .2s";
    }
//删除过渡
    var removeTransition = function () {
        imageBox.style.webkitTransition = 'none';
        imageBox.style.transition = "none";
    }
// 设置定位
    var translateX = function (x) {
        imageBox.style.webkitTransform = 'translateX(' + x + 'px)';
        imageBox.style.transform = 'translateX(' + x + 'px)';

    }

}


</script>